<script>
import { reactive, toRefs, onMounted, getCurrentInstance } from "vue";

import LineChart from "@/components/Charts/LineChart.vue";
import BarChart from "@/components/Charts/BarChart.vue";
export default {
  components: { LineChart, BarChart },
  setup() {
    const state = reactive({
      // labelList: ["10:00", "11:00", "12:00", "13:00", "14:00"],
      labelList: [],
      // dataList: [
      //   150, 230, 224, 218, 135, 200, 129, 208, 125, 109, 170, 159, 219, 149,
      //   160, 209, 109, 201, 175, 200,
      // ],
      dataList: [],
      form: {
        gateId: null,
        hour: 5
      },
      title: "出入口客流按小时统计",
      isGetData: false,// 是否获取到数据，异步更新子组件
      fieldStr: ["gdCountIn", "gdCountOut", "gdPcountIn", "gdPcountOut", "gdCountInMale", "gdCountOutMale", "gdPcountInMale", "gdPcountOutMale", "gdCountInFemale", "gdCountOutFemale", "gdPcountInFemale", "gdPcountOutFemale", "gdCountInBag", "gdCountOutBag", "gdPcountInBag", "gdPcountOutBag", "gdCountInNobag", "gdCountOutNobag", "gdPcountInNobag", "gdPcountOutNobag"]
    });
    const { proxy } = getCurrentInstance();
    onMounted(async () => {
      proxy.$API.statGate.recentlyHourFlowList.get(state.form).then((data) => {
        data.forEach(element => {
          state.labelList.push(element['gdDate'].slice(11, 16))
          state.dataList.push(parseInt(element[state.fieldStr[0]]))
          state.dataList.push(parseInt(element[state.fieldStr[1]]))
          state.dataList.push(parseInt(element[state.fieldStr[2]]))
          state.dataList.push(parseInt(element[state.fieldStr[3]]))
        });
        console.log(state.labelList)
        console.log(state.dataList)
        state.isGetData = true
      });
    });

    return { ...toRefs(state) };
  },
};
</script>

<template>
  <div style="display: flex; height: 33.33%" v-if="isGetData">
    <BarChart :title="title" :labelList="labelList" :dataList="dataList" />
    <BarChart :title="title" :labelList="labelList" :dataList="dataList" />
    <BarChart :title="title" :labelList="labelList" :dataList="dataList" />
  </div>
  <div style="display: flex; height: 33.33%" v-if="isGetData">
    <LineChart :title="title" :labelList="labelList" :dataList="dataList" />
    <LineChart :title="title" :labelList="labelList" :dataList="dataList" />
    <LineChart :title="title" :labelList="labelList" :dataList="dataList" />
  </div>
  <div style="display: flex; height: 33.33%" v-if="isGetData">
    <LineChart :title="title" :labelList="labelList" :dataList="dataList" />
    <LineChart :title="title" :labelList="labelList" :dataList="dataList" />
    <LineChart :title="title" :labelList="labelList" :dataList="dataList" />
  </div>
</template>

<style scoped></style>